<template>
	<view>
		<u-popup v-model="show" mode="bottom" :mask-close-able="false" @close="close">
			<view class="pay-bar-main" v-if="!lackBalance">
				<view class="top-wrapper">
					<view class="pay-title">
						支付订单
					</view>
					<view class="cancel-btn" @click="cancel">
						取消
					</view>
				</view>
				<view class="price-wrapper">
					<text class="unit">￥</text><text class="price">{{order.price}}</text>
				</view>
				<view class="countdown-wrapper">
					<view class="label">支付剩余时间：</view>
					<view class="countdown">
						<u-count-down color="#188CF1" separator-color="#188CF1" separator='zh' separator-size="24"
							font-size="24" :timestamp="order.countDown" />
					</view>
				</view>
				<view class="pay-pattern-wrapper">
					<view class="pay-pattern-title">
						账户余额
					</view>
					<view class="pay-pattern-select-status"></view>
				</view>
				<button class="btn" @click="confirmPay">确认支付</button>
			</view>
			<view class="pay-bar-main" v-else>
				<view class="lack-balance-icon">
					!
				</view>
				<view class="title">
					余额不足
				</view>
				<view class="tips">
					您当前账户余额不足，请充值后购买
				</view>
				<button class="btn" style="margin-top: 90rpx;" @click="toTopup">确认</button>
			</view>
		</u-popup>
		<!-- <officialFollow ref="officialFollow" /> -->
	</view>
</template>

<script>
	// import officialFollow from "@/components/official-follow/officialFollow.vue";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			// officialFollow
		},
		data() {
			return {
				show: false,
				lackBalance: false,
				countDown: 0,
				order: {},
				payStatus: null,
				paySuccess: null,
			}
		},
		props: {
			isToOrderDetail: {
				type: Boolean,
				default: true,
			},
			isCheckFollowStatus: {
				type: Boolean,
				default: false,
			}
		},
		methods: {
			pay(data) {
				return new Promise(async (resolve, reject) => {
					if (this.isCheckFollowStatus) {
						// await this.$refs.officialFollow.checkFollow();
					}
					this.close();
					// const nowTime = parseInt(+new Date() / 1000);
					// const expirationTime = Number(data.createTime) + Number(data.expiresTime);
					this.$set(this.order, 'taskCode', data.taskCode);
					this.$set(this.order, 'price', data.price);
					this.$set(this.order, 'countDown', Number(data.countDown));
					if (data.again_pay) {
						this.$set(this.order, 'again_pay', data.again_pay);
					}
					// this.$set(this.order, 'returnUrl', data.returnUrl);
					// this.$set(this.order, 'createTime', data.createTime);
					// this.$set(this.order, 'expiresTime', data.expiresTime);
					// this.countDown = parseInt(expirationTime - nowTime),
					this.show = true;
					await this.payStatus;
					resolve();
				})
			},
			close() {
				this.order = {};
				this.countDown = 0;
				this.lackBalance = false;
				this.payStatus = new Promise((resolve, reject) => {
					this.paySuccess = resolve;
				});
			},
			toTopup() {
				uni.navigateTo({
					url: `/pages/top_up/topUp?order=${JSON.stringify(this.order)}`,
					success: () => {
						this.show = false;
					}
				})
			},
			cancel() {
				this.show = false;
				if (this.isToOrderDetail) {
					this.$u.route(`/pages/order_detail/orderDetail?taskCode=${this.order.taskCode}`);
				}
			},
			async confirmPay() {
				const options = {
					task_code: this.order.taskCode,
					amount: this.order.price,
				}
				if (this.order.again_pay) {
					options.again_pay = this.order.again_pay
				}
				this.$u.post(this.$restUrl.balancePayment, options).then(res => {
					console.log(res);
					this.$showToast('支付成功');
					this.paySuccess();
					this.show = false;
					this.updateUserInfo();
				}).catch(err => {
					console.log(err)
					if (err.status_code == 405) {
						this.lackBalance = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./payBar.scss";
</style>
